<template>
  <div>
    <el-form ref="dataForm" v-model="query" class="form">
      <el-form-item prop="ck_007_sys_setting_1_30">
        <el-checkbox v-model="query.ck_007_sys_setting_1_30">启用实名制开户</el-checkbox>
      </el-form-item>
      <el-form-item prop="ck_007_sys_setting_1_5">
        <el-checkbox v-model="query.ck_007_sys_setting_1_5" @change="setting_1_5Change">所有渠道新建客户默认为未审核</el-checkbox>
      </el-form-item>
      <!-- <div class="config-group">
        <el-form-item label="生效渠道：">
          <el-select v-model="checkList_setting_1_5_channel2" multiple placeholder="请选择">
            <el-option
              v-for="item in channelList"
              :key="item.value"
              :label="item.desc"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div> -->
      <el-form-item prop="ck_007_sys_setting_1_15">
        <el-checkbox v-model="query.ck_007_sys_setting_1_15" @change="setting_1_15Change">押金审核通过时自动审核对应客户资料</el-checkbox>
      </el-form-item>
      <el-form-item class="config-item" prop="ck_007_sys_setting_sp6_1">
        <el-checkbox v-model="query.ck_007_sys_setting_sp6_1" @change="sp6_1Change">押金审核不通过时自动作废对应客户资料</el-checkbox>
        <!-- <el-popover
          class="config-tip"
          placement="right"
          width="200"
          trigger="hover"
        >
          <div>用户押金审核通过时客户状态为已审核，押金审核不通过则客户将作废。</div>
          <i slot="reference" class="el-icon-question radio-icon" />
        </el-popover> -->
      </el-form-item>

      <div class="config-group">
        <el-form-item label="生效类型：">
          <el-select v-model="checkList_sp6_type" multiple placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.desc"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="config-group">
        <el-form-item label="生效渠道：">
          <el-select v-model="checkList_sp6_channel" multiple placeholder="请选择">
            <el-option
              v-for="item in channelList"
              :key="item.value"
              :label="item.desc"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>

      <el-form-item class="config-item" prop="ck_007_sys_setting_sp6_2">
        <el-checkbox v-model="query.ck_007_sys_setting_sp6_2">餐饮连锁开户成功后性质固定</el-checkbox>
        <el-popover
          class="config-tip"
          placement="right"
          width="200"
          trigger="hover"
        >
          <div>餐饮连锁用户开户成功后，使用同一营业执照开户的用户用气性质将为连锁餐饮。</div>
          <i slot="reference" class="el-icon-question radio-icon" />
        </el-popover>
      </el-form-item>
      <el-form-item prop="ck_007_sys_setting_sp6_3">
        <el-checkbox v-model="query.ck_007_sys_setting_sp6_3" @change="sp6_3Change">启用关联客户组</el-checkbox>
      </el-form-item>
      <div class="config-group">
        <el-form-item label="生效类型：">
          <el-select v-model="checkList_sp6_type2" multiple placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.desc"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <el-form-item prop="ck_007_sys_setting_sp6_10">
        <el-checkbox v-model="query.ck_007_sys_setting_sp6_10">好运气平台新增押金时，押金机构不允许选择企业的总公司</el-checkbox>
      </el-form-item>
      <el-form-item prop="ck_007_sys_setting_sp6_11">
        <el-checkbox v-model="query.ck_007_sys_setting_sp6_11">好运气平台押金开始时间只允许选择自然月内的时间</el-checkbox>
      </el-form-item>
      <el-form-item prop="ck_007_sys_setting_sp6_16">
        <el-checkbox v-model="query.ck_007_sys_setting_sp6_16">客户手机号唯一</el-checkbox>
      </el-form-item>
      <el-form-item prop="ck_007_sys_setting_sp6_23">
        <el-checkbox v-model="query.ck_007_sys_setting_sp6_23">退瓶消单确认客户是否退空瓶</el-checkbox>
      </el-form-item>
      <template v-if="userInfo.showRN == JINJIANG">
        <el-form-item class="config-item" prop="ck_007_sys_setting_sp6_1">
          <el-checkbox v-model="query.ck_007_sys_setting_sp6_24" @change="sp6_24Change">租瓶签署协议</el-checkbox>
        </el-form-item>
        <div class="config-group">
          <el-form-item label="生效渠道：">
            <el-select v-model="bottleSignedEffectChannel" multiple placeholder="请选择">
              <el-option
                v-for="item in depositProtocolChannelList"
                :key="item.value"
                :label="item.desc"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </template>
      <!-- <el-form-item prop="ck_007_sys_setting_sp6_23" style="color: #606266;">
        当非居民客户每年订气量达<el-input-number v-model="goodsCountFree" :min="1" :max="9999" controls-position="right" />瓶时，将免收当年的租金
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
  import { csmCombineType, csmSourceType } from '@/api'
  import { mapGetters } from 'vuex'

  const JINJIANG = 58 // 晋江城市标识

  export default {
    name: 'openAccountTab',
    data() {
      return {
        JINJIANG,
        query: {
          ck_007_sys_setting_1_30: false,
          ck_007_sys_setting_1_5: false,
          ck_007_sys_setting_1_15: false,
          ck_007_sys_setting_sp6_1: false,
          ck_007_sys_setting_sp6_2: false,
          ck_007_sys_setting_sp6_3: false,
          ck_007_sys_setting_sp6_10: false,
          ck_007_sys_setting_sp6_11: false,
          ck_007_sys_setting_sp6_16: false,
          ck_007_sys_setting_sp6_23: false,
          ck_007_sys_setting_sp6_24: false
        },
        checkList_sp6_type: [],
        checkList_sp6_channel: [],
        // checkList_setting_1_5_channel2: [3, 4],
        checkList_sp6_type2: [],
        typeList: [],
        channelList: [],
        bottleSignedEffectChannel: [],
        depositProtocolChannelList: []
        // goodsCountFree: undefined
      }
    },
    computed: {
      ...mapGetters([
        'corpSettingData', 'userInfo'
      ])
    },
    async created() {
      await this.getCsmCombineType()
      await this.getCsmSourceType()
      this.init()
    },
    methods: {
      async getCsmCombineType() {
        const res = await csmCombineType()
        if (res && res.data) {
          this.typeList = res.data
        }
      },
      async getCsmSourceType() {
        const res = await csmSourceType()
        if (res && res.data) {
          this.channelList = res.data
          this.depositProtocolChannelList = res.data.filter(item => item.value === 1 || item.value === 2)
        }
      },
      init() {
        console.log(this.corpSettingData)
        if (this.corpSettingData) {
          this.query.ck_007_sys_setting_1_30 = !!(this.corpSettingData.sp1 >> 30 & 0x01)
          this.query.ck_007_sys_setting_1_5 = !!(this.corpSettingData.sp1 >> 5 & 0x01)
          this.query.ck_007_sys_setting_1_15 = !!(this.corpSettingData.sp1 >> 15 & 0x01)
          this.query.ck_007_sys_setting_sp6_1 = !!(this.corpSettingData.sp6 >> 1 & 0x01)
          this.query.ck_007_sys_setting_sp6_2 = !!(this.corpSettingData.sp6 >> 2 & 0x01)
          this.query.ck_007_sys_setting_sp6_3 = !!(this.corpSettingData.sp6 >> 3 & 0x01)
          this.query.ck_007_sys_setting_sp6_10 = !!(this.corpSettingData.sp6 >> 10 & 0x01)
          this.query.ck_007_sys_setting_sp6_11 = !!(this.corpSettingData.sp6 >> 11 & 0x01)
          this.query.ck_007_sys_setting_sp6_16 = !!(this.corpSettingData.sp6 >> 16 & 0x01)
          this.query.ck_007_sys_setting_sp6_23 = !!(this.corpSettingData.sp6 >> 23 & 0x01)
          this.query.ck_007_sys_setting_sp6_24 = !!(this.corpSettingData.sp6 >> 24 & 0x01)
          const depSyncCusSubType = this.corpSettingData.depSyncCusSubType ? this.corpSettingData.depSyncCusSubType.split(',') : []
          this.checkList_sp6_type = depSyncCusSubType.map((item) => (Number(item)))
          const depSyncCusFromPlat = this.corpSettingData.depSyncCusFromPlat ? this.corpSettingData.depSyncCusFromPlat.split(',') : []
          this.checkList_sp6_channel = depSyncCusFromPlat.map((item) => (Number(item)))
          const relationGroupSubType = this.corpSettingData.relationGroupSubType ? this.corpSettingData.relationGroupSubType.split(',') : []
          this.checkList_sp6_type2 = relationGroupSubType.map((item) => (Number(item)))
          const bottleSignedEffectChannel = this.corpSettingData.bottleSignedEffectChannel ? this.corpSettingData.bottleSignedEffectChannel.split(',') : []
          this.bottleSignedEffectChannel = bottleSignedEffectChannel.map((item) => (Number(item)))
          // this.goodsCountFree = this.corpSettingData.goodsCountFree || undefined
        }
      },
      sp6_1Change(e) {
        if (!this.query.ck_007_sys_setting_sp6_1) {
          this.checkList_sp6_type = []
          this.checkList_sp6_channel = []
        }
        // if (e && this.query.ck_007_sys_setting_1_15) {
        //   this.query.ck_007_sys_setting_1_15 = false
        // }
      },
      setting_1_5Change(e) {
        // if (!this.query.ck_007_sys_setting_1_5) {
        //   this.checkList_setting_1_5_channel2 = []
        // }
      },
      sp6_3Change() {
        if (!this.query.ck_007_sys_setting_sp6_3) {
          this.checkList_sp6_type2 = []
        }
      },
      setting_1_15Change(e) {
        // if (e && this.query.ck_007_sys_setting_sp6_1) {
        //   this.query.ck_007_sys_setting_sp6_1 = false
        //   this.checkList_sp6_type = []
        //   this.checkList_sp6_channel = []
        // }
      },
      sp6_24Change() {
        if (!this.query.ck_007_sys_setting_sp6_24) {
          this.bottleSignedEffectChannel = []
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  .el-form-item {
    margin-bottom: 0;
  }

  .config-item {
    .radio-item {
      margin-bottom: 15px;
    }
    .radio-icon {
      font-size: 16px;
      color: #606266;
    }
    .config-tip {
      margin-left: 10px;
    }
  }
  .config-group {
    padding-left: 12px;
    margin-bottom: 10px;
    /deep/ .el-select {
      width: 30%;
      min-width: 300px;
    }
  }
}
</style>
